<script setup lang="ts">

import { computed, ref } from 'vue';
import { useClipboard } from '@vueuse/core';
import { ElMessage } from 'element-plus';
const { copy, isSupported } = useClipboard({ legacy: true });

const invitationDialogVisible = ref(false);

const invitationUrl = computed(() => {
  const inviteCode = window.localStorage.getItem("InviteCode");
  return "https://console.juggle.plus/login?inviteCode="+inviteCode;
});

function copyInvitationUrl() {
  if (!isSupported) {
    ElMessage({ type: 'error', message: '当前浏览器不知道复制API' });
    return;
  }
  copy(invitationUrl.value);
  ElMessage({ type: 'success', message: '复制成功' });
}

function open(){
  invitationDialogVisible.value = true;
}

defineExpose({ open });
</script>

<template>
  <el-dialog v-model="invitationDialogVisible" title="邀请码" width="500" center>
    <div>
      <div class="title">推荐奖励</div>
      <ul class="inspired">
        <li><span class="point">●</span>每邀请一个用户注册成功后，你可获赠 500 码豆。</li>
        <li><span class="point">●</span>每发布一篇推广文章或者视频，奖励300码豆。(联系客服发放)</li>
      </ul>
      <div class="title">邀请链接</div>
      <div class="invitation-input">
        <el-input v-model="invitationUrl">
          <template #append><span class="copy-link" @click="copyInvitationUrl">复制链接</span></template>
        </el-input>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="less">
.title{
  font-size: 20px;
  margin-bottom: 10px;
}

.inspired{
  list-style: none;
  padding-left: 0;
  li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .point {
      margin-right: 6px;
      font-size: 6px;
      color: var(--el-color-primary);
    }
  }
}

.invitation-input{
  margin-bottom: 20px;
  .copy-link {
    cursor: pointer;
  }
}
</style>